<script setup lang="ts">

import {store} from "@/modal/store";
import ToolType from "@/components/ToolType/ToolType.vue";
import Tool, {Graver, Soil} from "@/modal/Tool";
import IconFont from "@/components/IconFont/IconFont.vue";
import {IconColor, IconType} from "@/components/IconFont/type";
import {reactive, type Reactive} from "vue";
import Action from "@/modal/Action";
import {ActionName} from "@/components/type";
import Buff from "@/modal/Buff";
import Goods from "@/modal/Goods";
import Shovel from "@/modal/Tool";
import Pop from "@/modal/Pop";
import Compost from "@/modal/Compost";

const action = reactive(Action.getInstance());
const buff = reactive(Buff.getInstance());
const goods = reactive(Goods.getInstance());
const compost = reactive(Compost.getInstance());
const pop = reactive(Pop.getInstance());
const tools: Reactive<Tool[]> = store.tools;

function setToolBuff(modal: Reactive<Tool>) {
  if (buff.barrowGoods) goods.barrowSwitchGoods();
}

function useTool(modal: Reactive<Tool>) {
  if (modal instanceof Shovel && buff.shovelBuff) { // 使用铲子
    if (compost.canUse) {
      compost.use();
      pop.toggle().showType(ActionName.BONUS);
    } else alert(`当前化肥${compost.currentBag}袋，不足以使用`);
  }
  if (modal instanceof Soil) {
    action.setAction([ActionName.FLOWER]);
  }
}

const executeToolAreaAction = (modal: Reactive<Tool>) => {
  if (action.toolTimes === 0) return;
  if (!modal.isRipen) {
    modal.growUp().getAward();
    action.useAction(ActionName.TOOL);
    setToolBuff(modal);
  }
  if (modal.isRipen) {
    if (modal instanceof Graver) {
    
    }
  }
};


</script>

<template>
  <div class="tool col-12 h-100">
    <div class="tool-title">
      <icon-font :icon-type="IconType.TOOL"
                 :color="IconColor.FERTILIZER"
                 :is-desc="true"
                 font-size="xx-large">
        <template #description>{{ "工具棚" }}</template>
      </icon-font>
    </div>
    <div class="tool-content">
      <template v-for="item in tools">
        <div class="tool-item">
          <tool-type :tools="item"
                     @emit-grow-up="executeToolAreaAction"
                     @emit-use-tool="useTool"
          ></tool-type>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
.tool {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.tool-title {
  height: 50px;
}

.tool-content {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 50px);
}

.tool-item {
  width: calc(100% / 3);
  height: calc(100% / 5);
  border: 1px dashed bisque;
  border-radius: 15px;
}
</style>